﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .menus li
        {
            float: left; /* 靠左浮动 */
            list-style: none; /* 清空列表风格 */
            margin-right: 1px; /* 右侧的间隔 */
        }
        /* 菜单项链接 */
        .menus li a
        {
            display: block; /* 显示为块 */
            text-decoration: none; /* 没有下横线 */
            margin: 0px;
        }
        /* 当前菜单位置 */
        .menus ul
        {
            position: absolute;
            top: 40px;
        }
        
        /* 二级菜单 */
        .children
        {
            display: none; /* 初始化页面时不显示出来 */
            padding: 20;
            margin: 0 0 0 0;
        }
        /* 二级菜单的菜单项 */
        .children li
        {
            border-top: solid 1px #FFFFFF;
            float: none; /* 垂直排列 */
            margin: 0;
            padding: 0;
        }
        /* 二级菜单的当前菜单项链接 */
        .children li a
        {
            padding: 0px 10px; /* 内边距 */
            width: 130px; /* 对 IE6 来说十分很重要 */
        }
        
        .children li a:hover
        {
            background-color: #2C6EA7;
            color: Red;
        }
        /*菜单导航结束*/
    </style>
</head>
<body>
    <ul class="menus">
        <li><a href="" id="home">HOME</a></li>
        <li><a href="" id="businessLoans">BUSINESS LOANS</a>
            <ul class="children">
                <li><a href="">Unsecured Loans</a></li>
                <li><a href="">Secured Loans</a></li>
                <li><a href="">Payroll Finance</a></li>
            </ul>
        </li>
        <li><a href="" id="howItWorks">HOW IT WORKS</a></li>
        <li><a href="" id="faqs">FAQs</a></li>
        <li><a href="" id="loadnCalculator">LOAN CALCULATOR</a></li>
        <li class="last" id="contackUs"><a href="">CONTACT US</a></li>
    </ul>

    <script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        var mouseover_tid = [];
        var mouseout_tid = [];

        jQuery(document).ready(function () {

            jQuery('.menus > li').each(function (index) {
                jQuery(this).hover(

			        function () {
			            var _self = this;
			            clearTimeout(mouseout_tid[index]);
			            mouseover_tid[index] = setTimeout(function () {
			                jQuery(_self).find('ul:eq(0)').fadeIn(200);
			            }, 400);
			        },

			        function () {
			            var _self = this;
			            clearTimeout(mouseover_tid[index]);
			            mouseout_tid[index] = setTimeout(function () {
			                jQuery(_self).find('ul:eq(0)').fadeOut(200);
			            }, 400);
			        }

		        );
            });
        });	
    </script>
</body>
</html>
